<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>10_过渡&动画1</title>
		<style>
			/*指定过渡样式*/
			.xxx-enter-active, .xxx-leave-active {
			  transition: opacity 1s
			}
			
			/*指定隐藏时的样式*/
			.xxx-enter, .xxx-leave-to {
			  opacity: 0;
			}

			/*显示的过渡效果*/
			.move-enter-active {
			  transition: all 1s
			}

			/*隐藏的过渡效果*/
			.move-leave-active {
			  transition: all 3s
			}

			/*隐藏时的样式*/
			.move-enter, .move-leave-to {
			  opacity: 0;
			  transform: translateX(20px)
			}
		  </style>
	</head>
	<body>
		<!-- 使用方法
		在目标元素外包裹<transition name="xxxx"></transition>
		定义样式css
				指定过渡时样式 transition: opacity 1s;
				指定隐藏时的样式 transition: opacity/其他 -->
		<!--
			1. vue动画的理解
			  操作css的trasition或animation
			  vue会给目标元素添加/移除特定的class
			  
			2. 基本过渡动画的编码
			  1). 在目标元素外包裹<transition name="xxx">
			  2). 定义class样式
				1>. 指定过渡样式: transition
				2>. 指定隐藏时的样式: opacity/其它
				
			3. 过渡的类名
			  xxx-enter-active: 指定显示的transition
			  xxx-leave-active: 指定隐藏的transition
			  xxx-enter: 指定隐藏时的样式
		-->



		<div id="demo">
			<button @click="show = !show">Toggle</button>
			<transition name="xxx">
				<p v-show="show">hello</p>
			</transition>
		</div>

		<hr>
		<div id="demo2">
			<button @click="show = !show">Toggle2</button>
			<transition name="move">
				<p v-show="show">hello</p>
			</transition>
		</div>


		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#demo',
				data: {
					show: true
				}
			})

			new Vue({
				el: '#demo2',
				data: {
					show: true
				}
			})
		</script>
	</body>
</html>
